<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>HappyHour</title>
    <link rel="stylesheet" type="text/css" href="HappyHour.css" />
</head>
<body onload="onLoaded()">
    <div>        
        <h3>HappyHour OpenSocial Container (0.7)</h3>
        <div id="open-social-container-settings">
            <table cellpadding="3" cellspacing="2">
                <tr align="left">
                    <th class="configHeader">App ID</th>
                    <th class="configHeader">Viewer</th>
                    <th class="configHeader">Owner</th>
                    <th class="configHeader">Widget URI</th>
                    <th class="configHeader">View</th>
                    <th class="configHeader">Debug</th>
                    <th class="configHeader">IFRAME</th>
                    <th class="configHeader">BPC</th>
                    <th class="configHeader">&nbsp;</th>
                </tr>
                <tr>
                    <td class="configCell"><input type="text" size="5" id="HappyHour-app" value="1" /></td>
                    <td class="configCell" nowrap="nowrap"><input type="text" size="3" id="HappyHour-viewer" value="1" /><input id="HappyHour-viewer-purge" type="button" value="X" /></td>
                    <td class="configCell" nowrap="nowrap"><input type="text" size="3" id="HappyHour-owner" value="3" /><input id="HappyHour-owner-purge" type="button" value="X" /></td>
                    <td class="configCell" nowrap="nowrap">
                        <input type="text" size="45" id="HappyHour-widgetUrl" value="simple.xml" /> 
                    </td>
                    <td class="configCell" nowrap="nowrap">
                        <input type="hidden" id="HappyHour-surface" value="profile" />
                        <select id="HappyHour-surfaceList" onchange="switchViews(this);">
                            <option value="profile" selected="selected">profile</option>
                            <option value="canvas">canvas</option>
                        </select>                    
                    </td>
                    <td class="configCell" align="center"><input type="checkbox" id="chkGadgetDebug" onclick="gadgets._debugMode=this.checked;renderWidget();" /></td>
                    <td class="configCell" align="center"><input type="checkbox" id="chkUseIframe" onclick="gadgets._iframeMode=this.checked;renderWidget();" /></td>
                    <td class="configCell" align="center"><input type="checkbox" id="chkBypassCache" onclick="gadgets._cacheBust=this.checked;renderWidget();" /></td>
                    <td class="configCell"><input type="button" value="Refresh" onclick="renderWidget();"/></td>
                </tr>
            </table>
        </div>
        
        <div class="headerRule"></div>    
        
        <strong>Widget Title:</strong> <span id="HappyHour-label-widgetTitle"></span><br />
        <strong>Widget URI:</strong> <span id="HappyHour-label-widgetURI"></span><br />
        <strong>Message:</strong> <span id="HappyHour-label-message"></span>

        <div class="headerRule"></div>    
        <p></p>
        
        <!-- Place holder to inject the widget html content -->
        <iframe 
            id="HappyHour-widgetIframe" 
            name="HappyHour-widgetIframe" 
            class="HappyHour-widgetIframe" 
            width="850" 
            height="500" 
            scrolling="auto" 
            src="about:blank"></iframe>
            
        <div id="HappyHour-widgetContent" class="HappyHour-widgetContent"></div>

        <script type="text/javascript" src="gears_init.js"></script>
        <script type="text/javascript">    
            if(!window.google || !google.gears) {
                var x = location.href;
                location.href = "http://gears.google.com/?action=install&message=Install Google Gears for this demo" +
                "&return="+encodeURIComponent(x);
            }
        </script> 
        
        <p></p>
        <div class="headerRule"></div>    
        <a href="http://code.google.com/p/happyhour/">HappyHour - Google Code</a> | 
        <a href="http://code.google.com/apis/opensocial/">OpenSocial - Google Code</a> | 
        <a href="http://code.google.com/apis/opensocial/docs/index.html">OpenSocial API</a> | 
        <a href="http://code.google.com/apis/gadgets/docs/reference/">Google Gadgets API</a> | 
        <a href="http://code.google.com/apis/gears/">Google Gears API</a> | 
        <a href="http://visualjquery.com/">jQuery API</a> | 
        <a href="jsonptester.html">JSONP</a> | 
        <a href="http://www.getfirebug.com/">Firebug</a>
        
        <!-- common libraries -->
        <script type="text/javascript" src="prototype.js"></script> 
        <script type="text/javascript" src="jquery-1.2.3.js"></script> 
        <script type="text/javascript">
             jQuery.noConflict();
        </script>        
        <!-- /common libraries -->

        <!-- SHINDIG gadgets reference -->
        <script type="text/javascript" src="gadgets/core.js"></script> 
        <script type="text/javascript" src="gadgets/config.js"></script> 
        <script type="text/javascript" src="gadgets/util.js"></script>  
        <script type="text/javascript" src="gadgets/prefs.js"></script>
        <script type="text/javascript" src="gadgets/unicode.js"></script> 
        <script type="text/javascript" src="gadgets/io.js"></script> 
        <script type="text/javascript" src="gadgets/rpc.js"></script> 
        <script type="text/javascript" src="gadgets/ifpc.js"></script> 
        <script type="text/javascript" src="gadgets/dynamic-height.js"></script> 
        <script type="text/javascript" src="gadgets/views.js"></script> 
        <script type="text/javascript" src="gadgets/setprefs.js"></script> 
        <script type="text/javascript" src="gadgets/settitle.js"></script> 
        <script type="text/javascript" src="gadgets/legacy.js"></script> 
        <script type="text/javascript" src="gadgets/json.js"></script>  
        <!-- /SHINDIG gadgets reference -->

        <!-- SHINDIG os reference -->
        <script type="text/javascript" src="os-0.7/opensocial.js"></script>
        <script type="text/javascript" src="os-0.7/container.js"></script>
        <script type="text/javascript" src="os-0.7/environment.js"></script>
        <script type="text/javascript" src="os-0.7/datarequest.js"></script>
        <script type="text/javascript" src="os-0.7/dataresponse.js"></script>
        <script type="text/javascript" src="os-0.7/responseitem.js"></script>
        <script type="text/javascript" src="os-0.7/activity.js"></script>
        <script type="text/javascript" src="os-0.7/collection.js"></script>
        <script type="text/javascript" src="os-0.7/address.js"></script>
        <script type="text/javascript" src="os-0.7/bodytype.js"></script>
        <script type="text/javascript" src="os-0.7/email.js"></script>
        <script type="text/javascript" src="os-0.7/enum.js"></script>
        <script type="text/javascript" src="os-0.7/message.js"></script>
        <script type="text/javascript" src="os-0.7/name.js"></script>
        <script type="text/javascript" src="os-0.7/organization.js"></script>
        <script type="text/javascript" src="os-0.7/person.js"></script>
        <script type="text/javascript" src="os-0.7/phone.js"></script>
        <script type="text/javascript" src="os-0.7/url.js"></script>   
        <script type="text/javascript" src="os-0.7/batchrequest.js"></script>         
        <script type="text/javascript" src="os-0.7/jsoncontainer.js"></script>   
        <script type="text/javascript" src="os-0.7/jsonperson.js"></script>   
        <!-- /SHINDIG os reference -->
        
        <!-- happy hour container -->
        <script type="text/javascript" src="HappyHourGadgets.js"></script>
        <script type="text/javascript" src="HappyHourContainer.js"></script>
        <script type="text/javascript" src="HappyHourManager.js"></script>   
        <!-- /happy hour container -->
        
        <script type="text/javascript">        
            var happyHourManager;

            var qs = new QueryString();
            
            jQuery('#HappyHour-app').val(qs.Get('app', 1));
            jQuery('#HappyHour-owner').val(qs.Get('owner', 3));
            jQuery('#HappyHour-viewer').val(qs.Get('viewer', 1));
            jQuery('#HappyHour-widgetUrl').val(qs.Get('uri', jQuery('#HappyHour-widgetUrl').val()));
            jQuery('#HappyHour-surface').val(qs.Get('surface', 'profile')); 

            function onLoaded() {
                window.setTimeout(function() {
                    var chkGadgetDebug = jQuery('#chkGadgetDebug');
                    var chkUseIframe = jQuery('#chkUseIframe');
                    var chkBypassCache = jQuery('#chkBypassCache');
                    
                    gadgets._iframeMode = chkUseIframe.attr('checked');
                    gadgets._debugMode = chkGadgetDebug.attr('checked');
                    gadgets._cacheBust = chkBypassCache.attr('checked');
                    
                    renderWidget();
                }, 800);
            };
        
            function renderWidget() {
                happyHourManager = new HappyHourManager();
                happyHourManager.init();                
                window._gadgetLoaded = false;
                window._viewParameters = null;    
            };
            
            function switchViews(list) {
                jQuery('#HappyHour-surface').val(list.options[list.selectedIndex].value);
                gadgets._setView(list.options[list.selectedIndex].value);
                window._gadgetLoaded = false;
                window._viewParameters = null;
            }; 
            
            function iframeLoaded(iframe) { 
                happyHourManager.onFrameLoaded(iframe);
            };
        </script>

    </div>
</body>
</html>
